<!--
    group: 企业管理
    name: 开票人管理
    item: 子组件
    url: /enterprise/invoiceIssuerManage
-->
<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="margin-bottom: 10px" >
      <a-form layout="inline">
        <a-row :gutter="24" style="margin-top: 10px">
          <a-col :md="9" :sm="12" :lg="10" :xxl="5">
            <a-form-item :label="type==2 ? '开票员' : '姓名'">
              <a-input placeholder="请输入" v-model="filterList.name" />
            </a-form-item>
          </a-col>
          <a-col v-if="type==1" :md="9" :sm="12" :lg="10" :xxl="5">
            <a-form-item label="手机号">
              <a-input placeholder="请输入" v-model="filterList.phone" />
            </a-form-item>
          </a-col>
          <a-col v-if="type==2" :md="9" :sm="12" :lg="10" :xxl="5">
            <a-form-item label="企业名称">
              <a-input placeholder="请输入" v-model="filterList.entName" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="10">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
                  <a-button style="margin-left: 10px" icon="reload" @click="handleReset">重置</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                  </a>
                </span>
          </a-col>
        </a-row>
        <div class="table-page-search-wrapper" v-show="toggleSearchStatus">
          <a-row :gutter="24">
            <a-col v-if="type==1" :md="6" :sm="8" :xxl="4">
              <a-form-item label="状态">
                <a-select placeholder="请选择" v-model="filterList.status">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">使用中</a-select-option>
                  <a-select-option value="0">已停用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="9" :sm="12" :lg="10" :xxl="5">
              <a-form-item label="所属单位">
                <a-input placeholder="请输入" v-model="filterList.affiliatedUnit" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>

    <a-table bordered
             :loading="loading"
             :pagination="false"
             :columns="columns"
             :data-source="tableData"
             :scroll="{x:800}"
    >
      <!--属性-->
      <span slot="bizType" slot-scope="text,record">
        {{{1:'内部员工',2:'渠道',3:'企业法人'}[text] || ''}}
      </span>

      <!--状态-->
      <span slot="status" slot-scope="text,record">
        <a-tag :color="{1:'#32BC51',0:'#bbbbbb'}[text] || ''">
          {{{1:'生效中',0:'已停用'}[text] || ''}}
        </a-tag>
      </span>

      <!--关联渠道/企业-->
      <span slot="entCount" slot-scope="text,record">
        <a @click="toDetails(record)">{{ text }}</a>
      </span>

      <!--操作-->
      <span slot="action" slot-scope="text,record">
        <a v-has="`qsb_kpygl:view:details${tabNum}`" @click="toDetails(record)">详情</a>
      </span>
    </a-table>
    <a-pagination
      v-model="page.currentPage"
      :page-size-options="['5', '10', '20']"
      :show-total="total => `共 ${total} 条`"
      :total="page.totalCount"
      show-size-changer
      :page-size="page.pageSize"
      @showSizeChange="onSizeChange"
      @change="onPageChange"
    >
    </a-pagination>

  </div>
</template>

<script>
import { queryInvoicersList,queryInvoicersEntList } from '@api/enterprise'

export default {
  name: 'invoiceIssuerItem',
  props: ['type','tabNum'],
  data(){
    return{
      toggleSearchStatus: false,
      filterList: {},
      loading: false,  //表格加载
      //表格分页
      page: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据
      },
      tableData: [],
      columns: [],
      //开票员
      columns1: [
        {
          title: '姓名',
          dataIndex: 'name',
          ellipsis: true,
          align: 'center',
          width: 120
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '属性',
          dataIndex: 'bizType',
          scopedSlots: {customRender: 'bizType'},
          ellipsis: true,
          align: 'center',
          width: 120
        },
        {
          title: '所属单位',
          dataIndex: 'bizName',
          ellipsis: true,
          align: 'center',
          width: 200
        },
        {
          title: '关联企业',
          dataIndex: 'entCount',
          scopedSlots: {customRender: 'entCount'},
          ellipsis: true,
          align: 'center',
          width: 120
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: {customRender: 'status'},
          align: 'center',
          width: 100
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          fixed:'right',
          width: 100
        },
      ],
      //企业
      columns2: [
        {
          title: '企业名称',
          dataIndex: 'entName',
          ellipsis: true,
          align: 'center',
          width: 140
        },
        {
          title: '姓名',
          dataIndex: 'name',
          customRender: (text) => {
            let re = "";
            if (text) {
              re = text;
            } else {
              re = "无";
            }
            return re;
          },
          ellipsis: true,
          align: 'center',
          width: 120
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          customRender: (text) => {
            let re = "";
            if (text) {
              re = text;
            } else {
              re = "无";
            }
            return re;
          },
          ellipsis: true,
          align: 'center',
          width: 130
        },
        {
          title: '属性',
          dataIndex: 'bizType',
          scopedSlots: {customRender: 'bizType'},
          ellipsis: true,
          align: 'center',
          width: 100
        },
        {
          title: '所属单位',
          dataIndex: 'bizName',
          ellipsis: true,
          align: 'center',
          width: 150
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          fixed:'right',
          width: 100
        },
      ],
    }
  },
  created() {
    //1_开票员  2_企业
    if (this.type == 2){
      this.columns = this.columns2;
    }else{
      this.columns = this.columns1;
    }
  },
  mounted() {
    this.getTableData();
  },
  methods:{
    //查询展开收起
    handleToggleSearch(){
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    //查询
    handleSearch(){
      this.page.currentPage = 1;
      this.getTableData();
    },
    //重置
    handleReset(){
      this.page.currentPage = 1;
      this.filterList = {};//清空查询条件
      this.getTableData();//重置列表
    },
    //选择页数
    onPageChange(newPage) {
      this.page.currentPage = newPage;
      this.getTableData()
    },
    // 页面变化
    onSizeChange(current, newSize) {
      this.page.pageSize = newSize;
      this.getTableData()
    },
    //跳转开票员详情
    toDetails(record){
      let urlInfo = {};
      this.type == 2 ?
        urlInfo = {
          path: '/enterprise/enterpriseList/enterpriseDetails1',
          query: {
            bizId: record.entId
          }
        } :
        urlInfo = {
          path: '/enterprise/invoiceIssuerManageDetails',
          query: {
            id: record.id
          }
        };

      this.$router.push(urlInfo)
    },
    //获取列表数据
    getTableData(){
      this.loading = true;
      let params = {}
      params.data = this.filterList;
      params.data.showFlag = 1;  //前台显示（0-否 1-是)企业端查询传递1,
      params.pageNo = this.page.currentPage
      params.pageSize = this.page.pageSize
      //1开票员 queryInvoicersList   2企业 queryInvoicersEntList
      let queryUrl;
      this.type == 2 ? queryUrl = queryInvoicersEntList : queryUrl = queryInvoicersList;

      queryUrl(params).then(res => {
        if (res.success) {
          const data = res.result;
          // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.page.totalCount = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
